<template>
  <span class="collapse-tag-group">
    <el-tag
      class="collapse-tag"
      v-for="tag in data"
      :key="tag.id"
      closable
      @close="onClose(tag.id)"
    >
      {{ tag.name }}
    </el-tag>
  </span>
</template>

<script>
export default {
  name: "CollapseUploadTags",
  props: {
      data: {
          type: Array,
          default: ()=> []
      }
  },
  
  methods: {
    onClose(key) {
      const newValue = this.data.filter(item => item.id !==key)
      console.log(newValue)
      this.$emit('data-tags', newValue)
    },
    
  },
};
</script>
<style scoped lang="scss">
.collapse-tag-group {
  margin: 0 20px;
  .collapse-tag {
    margin: 10px;
  }
  .el-tag {
    background: none;
    border-style: hidden;
  }
}
</style>